<!-- 星星组件 -->
<template>
	<view class="star-rating">
		<view v-for="(star, index) in starsArray" :key="index" class="star" :class="{
        'filled': star === 'full',
        'half': star === 'half',
        'empty': star === 'empty'
      }">
			{{ star === 'empty' ? '☆' : '★' }}
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';

	const props = defineProps({
		rating: {
			type: Number,
			default: 0
		},
		maxStars: {
			type: Number,
			default: 5
		}
	});

	const starsArray = computed(() => {
		const normalizedRating = Math.min(Math.max(0, props.rating), props.maxStars);
		const fullStars = Math.floor(normalizedRating);
		const hasHalfStar = normalizedRating % 1 >= 0.5;

		return Array.from({
			length: props.maxStars
		}).map((_, index) => {
			if (index < fullStars) {
				return 'full';
			} else if (index === fullStars && hasHalfStar) {
				return 'half';
			} else {
				return 'empty';
			}
		});
	});
</script>

<style scoped lang="scss">
	.star-rating {
		display: inline-flex;
		font-size: 36rpx;
		line-height: 1;
	}

	.star {
		color: #ccc; // 默认空心星颜色
		margin-right: 4rpx;

		&.filled {
			color: #ffc107; // 实心星颜色
		}

		&.half {
			position: relative;
			color: #ccc; // 底色为空心星

			&::after {
				content: '★';
				position: absolute;
				left: 0;
				width: 50%;
				overflow: hidden;
				color: #ffc107; // 半星颜色
			}
		}
	}
</style>